<div class="dialog-container mdd-dialog mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog B0212-dialog c-mdd-page" ng-init="dialog.init();" style="background-color: #fafafa" page-type="Dialog" _transclude-elem="[object Object]">
    <div class="kmi-header-row">
        <div class="header-title" ng-bind="dialog._title | translate"></div>
        <!--More Menu-->

        <!--Close button-->
        <div class="kmi-side-btn right" ng-click="dialog.hide();">
            <img src="image/icons/clear.png" />
            <div class="kmi-can-click"></div>
        </div>
    </div>
    <div class="kmi-layout-main-content" style="flex: 1">
        <!--Page-->
        <div class="kmi-layout-page">
            <div class="mdd-layout c-mdd-layout" layout-name="B0212" page-name="" page-type="Dialog" with-toolbar="N" reload="N" _transclude-elem="[object Object]" style="grid-template-columns: repeat(2, auto 1fr)">
                <div item-name="B0212_Slot_content" class="dialog-container mdl-shadow--8dp mdl-layout--fixed-header SMES-dialog B0212-dialog" ng-init="init();" style="grid-column-start: span 2">
                    <div class="kmi-layout-main-content" ng-reapet="item in list">
                        <div class="kmi-layout-page left-page" ng-show="dialog.isListOpen">
                            <div class="kmi-list machine-list kmi-list__no-header">
                                <div class="kmi-list__row-content">
                                    <div class="kmi-list__row" mdd-class="{'even-row':$even,'odd-row':$odd}" ng-repeat="esopFile in dialog.esopList track by $index" ng-click="dialog.clickEsopFile(esopFile);">
                                        <div class="kmi-list__column" style="flex: 1; white-space: normal" ng-bind="esopFile.esop_name"></div>
                                        <div class="kmi-can-click"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="kmi-layout-page center-page" ng-click="dialog.closeList();">
                            <i class="material-icons" ng-show="dialog.isListOpen"></i>
                            <i class="material-icons" ng-show="!dialog.isListOpen"></i>
                            <div class="kmi-can-click"></div>
                        </div>
                        <div class="kmi-layout-page right-page">
                            <!-- 20230810 modify by Alan for M#141414: 網頁類型的ESOP，用style做縮放控制 -->
                            <iframe id="kmi-pdf-panel" name="kmi-pdf-panel" ng-show="dialog.currentFile.content_type == '0' || dialog.currentFile.content_type == '3'" ng-style="dialog.htmlZoom"></iframe>
                            <video id="kmi-video-panel" width="320" height="240" controls="" autoplay="" loop="" style="width: 100%; height: 100%" ng-show="dialog.currentFile.content_type == '1'" onclick="this.paused?this.play():this.pause();"></video>
                            <div id="kmi-img-content" ng-show="dialog.currentFile.content_type == '2'">
                                <img id="kmi-img-panel" ng-src="{{dialog.currentFile.esop_content}}" />
                            </div>
                            <div class="toolbar" ng-show="dialog.currentFile.content_type == '0' || dialog.currentFile.content_type == '2' || dialog.currentFile.content_type == '3'">
                                <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1 sub" ng-click="dialog.zoom_in();">
                                    <img src="image/icons/add.png" />
                                </button>
                                <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1 sub" ng-click="dialog.zoom_out();">
                                    <img src="image/icons/remove.png" />
                                </button>
                            </div>
                            <!-- <object width="400" height="400" style="width:100%;height:100%;" data="{{dialog.currentFile.esop_content}}"  ng-show="dialog.currentFile.content_type == '0'"></object> -->
                            <!-- <object width="400" height="400" style="width:100%;height:100%;" data="http://www.tra.org.bh/media/document/sample10.pdf"  ng-show="dialog.currentFile.content_type == '0'" type="application/pdf"></object> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
